<template>
	<view class="menu-tool">
		<view class="iconfont icon-weixin shopping" @click="weixin"></view>
		<view class="iconfont icon-gouwuche shopping shoppingCart" id="target"
			@click="navigate('/pages/shopping/shopping')">
			<view class="cartTotalCount">{{cartTotal>99?'99+':cartTotal}}</view>
		</view>
		<view class="iconfont icon-fanhuidingbu shopping" @click="backToTop"></view>
	</view>
</template>

<script>
	import {
		cartNumber
	} from '../../utils/http_data.js';
	export default {
		name: "menu-tool",
		data() {
			return {
				cartTotal: 0,
				uid: uni.getStorageSync('login-userinfo')._id
			};
		},
		props: {
			cartTotalCount: {
				type: Number, // 数字类型
				required: false, // 必填项
				default: 0 // 默认值
			},
		},
		watch: {
			'cartTotalCount': {
				handler(val, oldVal) {
					this.cartTotal = val;
				}
			},
		},
		mounted() {
			this.getElementPosition();
			this.cartNumberFun();
		},
		methods: {
			cartNumberFun() {
				const uid = uni.getStorageSync('login-userinfo')._id
				cartNumber(uid).then((data) => {
					console.log('获取购物车数量：', data.totalN)
					this.cartTotal = data.totalN;
				}).catch((err) => {
					console.log(err)
				})
			},
			getElementPosition() {
				// 创建选择器查询
				const query = uni.createSelectorQuery().in(this);

				// 选择目标元素并获取位置信息
				query.select('#target')
					.boundingClientRect(data => {
						if (data) {
							// data 包含元素的位置和尺寸信息
							// console.log('元素位置信息：', {
							// 	top: data.top, // 元素上边界距离视口顶部的距离（px）
							// 	left: data.left, // 元素左边界距离视口左侧的距离（px）
							// 	right: data.right, // 元素右边界距离视口左侧的距离（px）
							// 	bottom: data.bottom, // 元素下边界距离视口顶部的距离（px）
							// 	width: data.width, // 元素宽度（px）
							// 	height: data.height // 元素高度（px）
							// });
							this.$emit('positionData', data)
						} else {
							console.log('未找到目标元素');
						}
					})
					.exec(); // 执行查询
			},
			navigate(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 打开新窗口 跳转到微信
			weixin() {
				window.open('https://wx.qq.com/', '_blank');
			},

			// 回到顶部
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
		}
	}
</script>

<style>
	.menu-tool {
		width: 60px;
		/* height: 300px; */
		position: fixed;
		bottom: 100px;
		right: 10px;
		background-color: #FFF;
		z-index: 9999;
		border-radius: 30px;
		box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
		padding: 30px 0;
		display: flex;
		flex-direction: column;
	}

	.shopping {
		font-size: 30px;
		color: #333333;
		text-align: center;
		margin-bottom: 16px;
		transition: transform 0.3s ease;
		cursor: pointer;
	}

	.shopping:nth-last-child(1) {
		margin-bottom: 0;
	}

	.shopping:hover {
		transform: scale(1.2);
		color: #D9001B;
	}

	.shoppingCart {
		position: relative;
		top: 0;
		left: 0;
	}

	.cartTotalCount {
		min-width: 16px;
		min-height: 16px;
		padding: 4px;
		color: #fff;
		border-radius: 50%;
		background-color: #D9001B;
		position: absolute;
		top: -10px;
		right: 6px;
		font-size: 12px;
		line-height: 16px;
		text-align: center;
	}
</style>